import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
// import infoImg from '../../../assets/images/cq/user/user-back-info.png';

import ic_anser from '../../../assets/images/cq/user/ic_anser@2x.png';
import ic_card from '../../../assets/images/cq/user/ic_card@2x.png';
import ic_invoice from '../../../assets/images/cq/user/ic_invoice@2x.png';
// import ic_oilCard from '../../../assets/images/cq/user/ic_oilCard@2x.png';
import ic_record from '../../../assets/images/cq/user/ic_record@2x.png';
// import ic_ticket from '../../../assets/images/cq/user/ic_ticket@2x.png';

import LogouAlert from '../../components/alert/alert.logout';

// import tel from '../../../assets/images/cq/user/user-tel-icon.png';
import {
  OLD_CARD_EXCHANGE,
  OLD_COUPON_EXCHANGE,
  OLD_HELP,
  // OLD_INVOICE,
  // SERVICE_TEL,
} from '../../constants/setting';
// import { callService } from '../../utils/func';

@connect(({ user }) => {
  return {
    user: user.get('user'),
    balance: user.getIn(['account', 'balance']),
    sumGift: user.getIn(['gift', 'sum']),
    couponCount: user.getIn(['gift', 'couponCount']),
  };
})
class UserCenter extends BaseComponent {
  componentDidMount() {
    this.requestData();
  }

  requestData = () => {
    this.props.dispatch({
      type: 'user/fetchSumGift',
    });
    this.props.dispatch({
      type: 'user/fetchBalance',
    });
    this.props.dispatch({
      type: 'user/fetchUserCouponTotal',
    });
  }

  goOrderList = () => {
    this.props.history.push('orderList');
  }

  goInvoice = () => {
    this.props.history.push({
      pathname: 'invoice',
      state: { init: true },
    });
  }

  goCouponList = () => {
    this.props.history.push('couponList');
  }

  goHelp = () => {
    window.location.href = OLD_HELP;
  }

  goCardExchange = () => {
    window.location.href = OLD_CARD_EXCHANGE;
  }

  goCouponExchange = () => {
    window.location.href = OLD_COUPON_EXCHANGE;
  }

  showLogoutAlert = () => {
    this.alert.show();
  }

  logout = () => {
    this.alert.close();
    this.props.dispatch({
      type: 'user/logout',
    });
  }
  render() {
    const { balance, couponCount, sumGift } = this.props;
    return (
      <div className="user-center-cq">
        <div className="info-sect">
          {/*<img className="infoImg" src={infoImg} alt="" />*/}
          <div className="info">
            <div className="info-text">{couponCount}</div>
            <div className="info-title">优惠券(张)</div>
          </div>
          <div className="info">
            <div className="info-text">{sumGift}</div>
            <div className="info-title">累计节省(元)</div>
          </div>
          <div className="info">
            <div className="info-text">{balance}</div>
            <div className="info-title">提油余额(元)</div>
          </div>
        </div>
        <div className="tab-sect first">
          <div className="item" onClick={this.goOrderList}>
            <img className="iconBox" src={ic_record} alt="" />
            <div className="text">交易记录</div>
          </div>
          <div className="item" onClick={this.goInvoice}>
            <img className="iconBox" src={ic_invoice} alt="" />
            <div className="text">我的发票</div>
          </div>
          <div className="item" onClick={this.goCouponList}>
            <img className="iconBox" src={ic_card} alt="" />
            <div className="text">我的卡券</div>
          </div>
        </div>
        {/* <div className="tab-sect">
          <div className="item" onClick={this.goCardExchange}>
            <img className="iconBox" src={ic_oilCard} alt="" />
            <div className="text">油卡兑换</div>
          </div>
          <div className="item" onClick={this.goCouponExchange}>
            <img className="iconBox" src={ic_ticket} alt="" />
            <div className="text">卡券兑换</div>
          </div>
        </div> */}
        {/* <div className="tab-sect">
          <div className="item" onClick={this.goHelp}>
            <img className="iconBox" src={ic_anser} alt="" />
            <div className="text">鱿鱼问答</div>
          </div>
        </div> */}
        <div className="flex-blank" />
        <div className="loginout-but" onClick={this.showLogoutAlert}>退出登录</div>

        <LogouAlert ref={alert => this.alert = alert} confirmFunc={this.logout} />
      </div>
    );
  }
}

export default UserCenter;
